<template>
	<view class="ferbox">
		<uni-grid :column="3" :showBorder="false" :square="false" :highlight='false' @change="change">
			<uni-grid-item v-for="(d, index) in list" :key="index" :index="index">
				<view class="item">
					<u--image :mode="'aspectFit'" :src="d.img" width="70rpx" height="70rpx"></u--image>
					<view class="mar-top10 fs-24">{{ d.name }}</view>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script>
export default {
	name: 'uni-fertilizer',
	props: {
		list: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {};
	},
	methods:{
		change(e){
			uni.showToast({
				title:e.detail.index+'',
				icon:'none',
				duration: 2000
			})
		}
	}
};
</script>

<style lang="scss">
.ferbox {
	margin-top: 30rpx;
	.item {
		height: 150rpx;
		width: 150rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border: 1px solid #ccc;
		border-radius: 8rpx;
		box-sizing: border-box;
	}
}
</style>
